<template>
  <div>
     <div class="sidebar-block recommend">
          <h2 class="title">
            <strong>热门推荐</strong>
          </h2>
          <ul>
            <li>
              <a target="_blank" :href="'/home/article/'+popular.ArticleId+'.html'" v-for="(popular,index) in arrPopularArticle" :key="index">
                <span class="thumb">
                  <img :src="popular.ArticleThrink" alt />
                </span>
                <span class="text">{{popular.ArticleTitle}}</span>
                <span class="text-muted">阅读({{popular.ArticleBrowsingNum}})</span>
              </a>
            </li>
          </ul>
        </div>
        <!-- <div class="sidebar-block comment">
          <h2 class="title">
            <strong>热门标签</strong>
          </h2>
          <ul>
            <li data-toggle="tooltip" data-placement="top" title="站长的评论">
              <a target="_blank" href>
                <span class="face">
                  <img src="/images/icon/icon.png" alt />
                </span>
                <span class="text">
                  <strong>个人技术博客站长</strong> (2015-10-18) 说：
                  <br />欢迎来到个人技术博客技术博客，在这里可以看到网站前端和后端的技术等
                  ...
                </span>
              </a>
            </li>
            <li data-toggle="tooltip" data-placement="top" title="读者墙上的评论">
              <a target="_blank" href>
                <span class="face">
                  <img src="/images/icon/icon.png" alt />
                </span>
                <span class="text">
                  <strong>个人技术博客站长</strong> (2015-10-18) 说：
                  <br />欢迎来到个人技术博客技术博客，在这里可以看到网站前端和后端的技术等
                  ...
                </span>
              </a>
            </li>
            <li data-toggle="tooltip" data-placement="top" title="个人技术博客技术博客的SHORTCUT和ICON图标...的评论">
              <a target="_blank" href>
                <span class="face">
                  <img src="/images/icon/icon.png" alt />
                </span>
                <span class="text">
                  <strong>个人技术博客站长</strong> (2015-10-18) 说：
                  <br />欢迎来到个人技术博客技术博客，在这里可以看到网站前端和后端的技术等
                  ...
                </span>
              </a>
            </li>
            <li data-toggle="tooltip" data-placement="top" title="个人技术博客技术博客的SHORTCUT和ICON图标...的评论">
              <a target="_blank" href>
                <span class="face">
                  <img src="/images/icon/icon.png" alt />
                </span>
                <span class="text">
                  <strong>个人技术博客站长</strong> (2015-10-18) 说：
                  <br />欢迎来到个人技术博客技术博客，在这里可以看到网站前端和后端的技术等
                  ...
                </span>
              </a>
            </li>
            <li data-toggle="tooltip" data-placement="top" title="个人技术博客技术博客的SHORTCUT和ICON图标...的评论">
              <a target="_blank" href>
                <span class="face">
                  <img src="/images/icon/icon.png" alt />
                </span>
                <span class="text">
                  <strong>个人技术博客站长</strong> (2015-10-18) 说：
                  <br />欢迎来到个人技术博客技术博客，在这里可以看到网站前端和后端的技术等
                  ...
                </span>
              </a>
            </li>
          </ul>
        </div> -->
  </div>
</template>
<script>
// import { Loading } from 'element-ui'
import store from '../store/index.js'
export default {
  name: 'bottomright',
  data () {
    return {
      arrPopularArticle: []
    }
  },
  created () {
    if (store.state.token) { this.getPopularBlogArticle() }
  },
  watch: {
    $route: {
      handler: function (val, oldVal) {
        this.getPopularBlogArticle()
      },
      // 深度观察监听
      deep: true
    }
  },
  methods: {
    // 热门文章
    getPopularBlogArticle () {
      // let loadingInstance = Loading.service({
      //   fullscreen: true,
      //   text: '加载中'
      // })
      this.$axios.get(config.blogService.blogHostUrl + 'api/blog/article/popular', {
        params: {
          bWeek: false// 是否本周热门
        }
      }).then(res => {
        // this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
        //   loadingInstance.close()
        // })
        if (res.status === 200) {
          this.arrPopularArticle = res.data.Data
        }
      }).catch(err => {
        console.log(err)
        // this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
        //   loadingInstance.close()
        // })
      })
    }
  }
}
</script>
<style scoped>

</style>
